/*
 * The CSS styling which is specific to the main HTML page.
 * CSS for jQuery extensions etc. is stored in separate files.
 */

/* CSS Resets */

div {
	margin: 0;
	padding: 0;
}


/* LAYOUT */

#content {
	position: absolute;
	border: solid 1px #000;
	margin: auto;
	font-family: sans-serif;
}
#rooms, #room, #devices {
	float: left;
	height: 500px;
}
#rooms {
	width: 200px;
}
#room {
	width: 700px;
}
#devices {
	width: 200px;
}
#timeline #year {
    background: #999;
	display: inline-block;
	margin: 0 25 0 25px;
	width: 120px;
	font-size: 40px;
	float: left;
	text-align: center;
	border: solid 5px #999;
	-webkit-border-radius: 13; 
	padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
     
}
#timeline #slider-container {
	display: inline-block;
	float: left;
	width: 700px;
}
#timeline #years {
	display: block;
}
#timeline #years span {
	display: inline-block;
	width: 74px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 3px;
}
#timeline #sponsor {
	display: inline-block;
	width: 160px;
	float: left;
}
#timeline #help-container {
	display: inline-block;
	width: 40px;
	float: left;
}
#room img.room-img {
	width: 100%;
	height: 450px;
}
.ui-heading {
	height: 50px;
}

#dialog {
	padding: 10px 10px 0 10px;
}

#dialog-image-container {
	float: left;
	display: inline-block;
	width: 250px;
	text-align: center;
	height: 410px;
	overflow: hidden;
	margin-right: 10px;
}

#dialog-image {
	margin: auto;
	width: 100%;
	height: auto;
}

#dialog-tabs {
	display: inline-block;
	float: left;
	width: 520px;
	height: 410px;
	border: none;
	padding: 0;
	margin: 0;
}

#dialog-tabs .ui-tabs-nav {
	display: inline-block;
	height: 402px;
	width: 200px;
	border-radius: 10px 0 0 10px;
}

#dialog-tabs .ui-tabs-panel {
	display: inline-block;
	width: 310px;
	height: 410px;
	overflow: auto;
	padding: 0;
	margin: 0;
	font-size: .9em;
}

#dialog-tabs .ui-tabs-nav li a { 
	font-size: 85%;
	padding: 1em 1em;
	width: 10.5em;
	font-weight: bold;
}

#dialog-timeline {
	display: block;
	position: absolute;
}


/* AESTHETICS */

.ui-heading {
/*  background-color: #CCCCCC;*/   
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AdAdB4), color-stop(100%,#888)); /* Chrome,Safari4+ */
	text-align: center;
	text-transform: uppercase;
	padding-top: 2px; 
	color: #FFF;
    text-decoration: none;
    font-weight: bold;    
	font-size: large;
    text-shadow: 0 -1px 1px #222;
}
.ui-heading .ui-subheading {
	text-transform: none;
	font-family: georgia;
	font-style: italic;
	font-size: 90%%;
}

#devices .ui-accordion-content {
	padding: 0;
	height: 198px;
}

#devices div > ul { 
	margin: 0;
	padding: 0;
}
#devices div > ul > li {
	cursor: hand;
	list-style: none;
	display: inline-block;
	margin: 3px 15px;
	padding: 3px 10px;
	border: solid 1px #EEEEEE;
	background-color: #FAFAFA;
	width: 140px;
	border-radius: 10px;
}
#devices div > ul > li:hover {
	border-color: #CCCCCC;
	background-color: #EEEEEE;
}

#rooms-tabs .ui-accordion-content {
	padding: 0;
	margin: 0;
	height: 0;
	width: 0;
	display: none;
	background-color: transparent;
}

#rooms-tabs h3 {
	padding-top: 23.5px;
	padding-bottom: 23.5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;  
	border-right:solid 2px #777;
}

#rooms-tabs h3.ui-state-active {
	border-right: none;
	-webkit-box-shadow: -2px 0 2px 2px rgba(81,81,81,0.6);
    
}

#slider .ui-slider-handle {
	text-decoration: none;
}
#slider .ui-slider-handle .ui-slider-handle-extra {
	position: relative;
	width: 100px;
	left: -40px;
	top: -3px;
	text-align: center;
	text-decoration: none;
}
#slider .ui-slider-handle .ui-slider-handle-extra img {
	width: 100px;
	height: 32px;
}

#sponsor {
	font-size: 11px;
	text-align: center;
}
#sponsor img {
	position: relative;
	left: 10px;
}

#help-container {
	font-size: 10px;
	margin-top: 5px;
	margin-left:80px;
	text-align: center;
}
#help-container a {
	color: #000000;
	text-decoration: none;
}
